<!-- eslint-disable no-tabs -->
<template>
  <div class="div111">
    <!-- 首页框架 -->
    <div class="div1">
      <div class="div1-1"></div>
      <!-- 轮播图 -->
      <div class="div2">
        <!-- 左侧菜单 -->
        <div class="div2-1">
          <div class="div2dd"></div>
        <div class="div2-1-1">
          <div class="wrapper">
            <div
              v-for="(item, index) in dictNavigationTabsList"
              :key="index"
              class="menu-wrapper">
              <span class="spanzuo1">{{ item.dictName }}</span>
              <span
                v-for="childItem in item.children"
                :key="childItem.id"
                class="spanzuo2"
                @click="handleClick(childItem.id)">
                {{ childItem.dictName }}
                <!-- 使用正确的属性名称 -->
              </span>
            </div>
          </div>
        </div>
      </div>
        <div class="div22"></div>
        <!-- 中间图片 -->
        <div class="div2-2">
          <el-carousel height="320px">
            <el-carousel-item v-for="item in tableData" :key="item.id">
              <el-image
                style="width: 100%; height: 100%"
                :src="
                  'http://101.43.223.224:8765/image/getImageById?id=' + item.img
                "
                @mouseenter="showImageName(item)"
                @mouseleave="hideImageName"
                :title="item.carouselName"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 右侧扩展 -->
        <!-- 课程标题数据为下方遍历的oursess.courseTitle -->
        <div class="div2-3">
          <div class="dddd"></div>
          <span class="span111">推荐课程</span>
          <!-- <div class="divdddd"></div> -->
          <div class="divddd" v-for="oursess in courseList"
            :key="oursess.id"
            @click="handleOursessClick(oursess)">
            <span class="span333">{{oursess.courseTitle}}</span>
          </div>
          <!-- 注：留一个即可利用循环展示9条随机数据，底下多余框起来部分仅用于展示循环后可以删除或注释掉 -->
          <!-- --------------------------------------------------------------------------------------------- -->
          <!-- --------------------------------------------------------------------------------------------- -->
        </div>
      </div>
      <!-- 直播公开课 -->
      <div class="div3" v-if="HideOrShow">

        <!-- 文字 -->
        <div class="div3-1">
          <div style="width: 25px; height: 5px; float: right;"></div>
          <div class="divs">
            <img src="../../assets/ziyan.jpg" class="img2">
          </div>
          <p class="p1">直播公开课</p>
        </div>
        <!-- <div class="div3-11"></div> -->
        <!-- 直播公开课视频模块 -->
        <div class="div3-222">
          <div
            class="div3-2-1"
            v-for="livePublic in livePublicClassesList"
            :key="livePublic.id"
            @click="handlelivePublicClick(livePublic.id)"
          >
            <div class="img6">
              <img :src="livePublic.coverId" class="img2"/>
            </div>
            <span class="span11">{{ livePublic.createTime }}</span>
            <br />
            <span class="span22">{{ livePublic.liveTitle }}</span>
            <br />
            <span class="span11">导师：{{ livePublic.nickName }}</span>
            <br />
            <span class="span33">强化进阶 全程备考 复习规划</span>
          </div>
        </div>
      </div>
        <!-- 精品课 -->
        <div class="div4">
          <!-- 文字 -->
          <div class="div3-1">
            <div style="width: 73px; height: 5px; float: right;"></div>
          <div class="divs">
            <img src="../../assets/ziyan.jpg" class="img2">
          </div>
            <p class="p1">精品课</p>
          </div>
          <!-- 精品课视频模块 -->
          <div class="div3-2">
            <div
              class="div4-2-1"
              v-for="classicCoursess in classicCourseList"
              :key="classicCoursess.id"
              @click="handleClassicCoursessClick(classicCoursess)"
            >
              <div class="img1">
                <img
                  :src="
                    'http://101.43.223.224:8765/image/getImageById?id=' +
                    classicCoursess.courseImg
                  "
                  class="img2"
                />
              </div>
              <span class="span44">{{ classicCoursess.courseTitle }}</span>
              <br />
              <br />
              <span class="span33">时间：{{ classicCoursess.createTime }}</span>
              <br />
              <span class="span33"
                >导师：{{ classicCoursess.teacherName }}</span
              >
              <br />
              <span class="span55">—————————————————————</span>
              <div class="div3-2-2">
                <span class="span77">已有154人购买</span>
                <span v-if="classicCoursess.payType === 0" class="span88"
                  >免费</span
                >
                <span v-if="classicCoursess.payType === 1" class="span88"
                  >￥{{ classicCoursess.coursePrice }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 微专业 -->
        <div class="div5">
          <!-- 文字 -->
          <div class="div3-1">
            <div style="width: 72px; height: 5px; float: right;"></div>
          <div class="divs">
            <img src="../../assets/ziyan.jpg" class="img2">
          </div>
            <p class="p1">微专业</p>
          </div>
          <div class="divd"></div>
          <!-- 微专业视频模块 -->
          <div class="div3-2">
            <div
              class="div5-2-1"
              v-for="microMajoress in microMajorList"
              :key="microMajoress.id"
              @click="handleMicroMajoressClick(microMajoress)"
            >
              <div class="img3">
                <img
                  :src="
                    'http://101.43.223.224:8765/image/getImageById?id=' +
                    microMajoress.courseImg
                  "
                  class="img2"
                />
              </div>
              <span class="span888">{{ microMajoress.courseTitle }}</span>
            </div>
          </div>
        </div>
        <!-- 系列课程 -->
        <div class="div6">
          <!-- 文字 -->
          <div class="div3-1">
            <div style="width: 48px; height: 5px; float: right;"></div>
          <div class="divs">
            <img src="../../assets/ziyan.jpg" class="img2">
          </div>
            <p class="p1">系列课程</p>
          </div>
          <div class="divdd"></div>
          <!-- 系列课程视频模块 -->
          <div class="div6-2">
            <div
              class="div6-2-1"
              v-for="seriesCoursess in seriesCourseList"
              :key="seriesCoursess.id"
              @click="handleSeriesCoursessClick(seriesCoursess)"
            >
              <div class="img4">
                <img
                  :src="
                    'http://101.43.223.224:8765/image/getImageById?id=' +
                    seriesCoursess.subjectImage
                  "
                  class="img8"
                />
                <br /><br />
              </div>
            </div>
          </div>
          <!-- <span class="span77">已有154人购买</span> -->
          <!-- <span class="span66">免费</span> -->
        </div>
        <!-- 精选好课 -->
        <div class="div7">
          <!-- 文字 -->
          <div class="div3-1">
            <div style="width: 48px; height: 5px; float: right;"></div>
          <div class="divs">
            <img src="../../assets/ziyan.jpg" class="img2">
          </div>
            <p class="p1">精选好课</p>
          </div>
          <!-- 精选好课视频模块 -->
          <div class="div3-2">
            <div
              class="div7-2-1"
              v-for="goodCoursess in goodCourseList"
              :key="goodCoursess.id"
              @click="handleGoodCoursessClick(goodCoursess)"
            >
              <div class="img5">
                <img
                  :src="
                    'http://101.43.223.224:8765/image/getImageById?id=' +
                    goodCoursess.courseImg
                  "
                  class="img2"
                />
              </div>
              <span class="span44">{{ goodCoursess.courseTitle }}</span>
              <br /><br />
              <span class="span33">时间：{{ goodCoursess.createTime }}</span>
              <br />
              <span class="span33">导师：{{ goodCoursess.teacherName }}</span>
              <br />
              <span class="span55">—————————————————————</span>
              <div class="div3-2-2">
                <!-- <span class="span77">已有154人购买</span> -->
                <!-- <span class="span88">￥398</span> -->
                <span v-if="goodCoursess.payType === 0" class="span88"
                  >免费</span
                >
                <span v-if="goodCoursess.payType === 1" class="span88"
                  >￥{{ goodCoursess.coursePrice }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="divd"></div>
        <!-- 新课推荐 -->
        <div class="div7">
          <!-- 文字 -->
          <div class="div3-1">
            <div style="width: 48px; height: 5px; float: right;"></div>
          <div class="divs">
            <img src="../../assets/ziyan.jpg" class="img2">
          </div>
            <p class="p1">新课推荐</p>
          </div>
          <!-- 新课推荐视频模块 -->
          <div class="div3-2">
            <div
              class="div7-2-1"
              v-for="newCoursess in newCourseList"
              :key="newCoursess.id"
              @click="handleNewCoursessClick(newCoursess)"
            >
              <div class="img5">
                <img
                  :src="
                    'http://101.43.223.224:8765/image/getImageById?id=' +
                    newCoursess.courseImg
                  "
                  class="img2"
                />
              </div>
              <span class="span44">{{ newCoursess.courseTitle }}</span>
              <br /><br />
              <span class="span33">时间：{{ newCoursess.createTime }}</span>
              <br />
              <span class="span33">导师：{{ newCoursess.teacherName }}</span>
              <br />
              <span class="span55">—————————————————————</span>
              <div class="div3-2-2">
                <!-- <span class="span77">已有154人购买</span> -->
                <span v-if="newCoursess.payType === 0" class="span88"
                  >免费</span
                >
                <span v-if="newCoursess.payType === 1" class="span88"
                  >￥{{ newCoursess.coursePrice }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 免费好课 -->
        <div class="div7">
          <!-- 文字 -->
          <div class="div3-1">
            <div style="width: 48px; height: 5px; float: right;"></div>
          <div class="divs">
            <img src="../../assets/ziyan.jpg" class="img2">
          </div>
            <p class="p1">免费好课</p>
          </div>
          <!-- 免费好课视频模块 -->
          <div class="div3-2">
            <div
              class="div7-2-1"
              v-for="course in freeCourseList"
              :key="course.id"
              @click="handleCourseClick(course)"
            >
              <div class="img5">
                <img
                  :src="
                    'http://101.43.223.224:8765/image/getImageById?id=' +
                    course.courseImg
                  "
                  class="img2"
                />
              </div>
              <span class="span44">{{ course.courseTitle }}</span>
              <br /><br />
              <span class="span33">时间：{{ course.createTime }}</span>
              <br />
              <span class="span33"></span>
              <br />
              <span class="span55">—————————————————————</span>
              <div class="div3-2-2">
                <!-- <span class="span77">已有154人购买</span> -->
                <span class="span88">免费</span>
              </div>
            </div>
          </div>
        </div>
        <div class="div8"></div>
        <!-- 图片 -->
        <div class="div9">
          <div class="div9-1">
            <img src="../../assets/dingjian.jpg" class="img7" />
          </div>
          <div class="div9-2">
            <img src="../../assets/quanjineng.jpg" class="img7" />
          </div>
        </div>
        <div class="div10">
          <div class="div9-1"></div>
          <div class="div9-2"></div>
        </div>
      </div>
    </div>
</template>

<script>
// import data from 'area-data-vue'
// 引用全局登录组件
import { EventBus } from '@/main'
export default {
  name: 'CarsharingRegister', // 修复template标签报错
  data () {
    return {
      HideOrShow: false,
      // 用户登录的id
      loginId: '',
      // 推荐课程
      courseList: [],
      // 免费课程
      freeCourseList: [],
      // 最新课程
      newCourseList: [],
      // 精选好课
      goodCourseList: [],
      // 系列课程
      seriesCourseList: [],
      // 精品课程
      classicCourseList: [],
      // 直播公开课
      livePublicClassesList: [],
      // 左侧导航栏
      dictNavigationTabsList: [],
      // 微专业课程
      microMajorList: [],
      // 轮播图
      tableData: [],
      isMouseHover: false,
      currentItem: null,
      userInfo: {}
    }
  },
  created () {
    // 免费课程查询方法
    this.freeCourses()
    // 新课推荐查询方法
    this.newCourses()
    // 精选好课查询方法
    this.goodCourse()
    // 系列课程查询方法
    this.seriesCourse()
    // 精品课查询方法
    this.classicCourse()
    // 直播公开课查询方法
    this.livePublicClasses()
    // 导航栏标签查询方法
    this.dictNavigationTabs()
    // 微专业课程查询方法
    this.microMajor()
    // 推荐课程查询方法
    this.recommendedCourse()
    // 推荐课程查询
    this.getimgs()
    // 获取用户存储的信息
    this.userInfo = JSON.parse(localStorage.getItem('user'))
    if (this.userInfo) {
      this.userInfo = this.userInfo.data
      this.loginId = this.userInfo.id
    }
  },
  methods: {
    // 导航标签点击事件
    handleClick (id) {
      // 将 id 赋值给 tiaoId
      this.tiaoId = id
      this.$router.push({
        path: '/search',
        query: { value: this.searchValue, tiaoId: this.tiaoId }
      })
    },
    // 推荐课程点击事件
    handleOursessClick (oursess) {
      // 判断是否登录
      if (this.loginId === null || this.loginId === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        const formData = new FormData()
        formData.append('uid', this.loginId)
        formData.append('cid', oursess.id)
        this.$axios.post('/Order/selectByTwoId', formData).then((res) => {
          if (oursess.payType === 0) {
          // 执行跳转页面
            this.$router.push({
              path: '/courseVideo',
              query: {
                roid: JSON.stringify(oursess)
              }
            })
          } else {
            if (res.data.data === null) {
              // 执行跳转页面
              this.$router.push({
                path: '/purchasecourses',
                query: {
                  roid: JSON.stringify(oursess)
                }
              })
            } else {
              // 执行跳转页面
              this.$router.push({
                path: '/courseVideo',
                query: {
                  roid: JSON.stringify(oursess)
                }
              })
            }
          }
        })
      }
    },
    // 直播公开课点击事件
    handlelivePublicClick (livePublic) {
      // 判断是否登录
      if (this.loginId === null || this.loginId === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        // 执行跳转页面
        this.$router.push({
          path: '/liveDetail',
          query: {
            roid: JSON.stringify(livePublic)
          }
        })
      }
    },
    // 精品课点击事件
    handleClassicCoursessClick (classicCoursess) {
      // 判断是否登录
      if (this.loginId === null || this.loginId === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        const formData = new FormData()
        formData.append('uid', this.loginId)
        formData.append('cid', classicCoursess.id)
        this.$axios.post('/Order/selectByTwoId', formData).then((res) => {
          if (classicCoursess.payType === 0) {
          // 执行跳转页面
            this.$router.push({
              path: '/courseVideo',
              query: {
                roid: JSON.stringify(classicCoursess)
              }
            })
          } else {
            if (res.data.data === null) {
              // 执行跳转页面
              this.$router.push({
                path: '/purchasecourses',
                query: {
                  roid: JSON.stringify(classicCoursess)
                }
              })
            } else {
              // 执行跳转页面
              this.$router.push({
                path: '/courseVideo',
                query: {
                  roid: JSON.stringify(classicCoursess)
                }
              })
            }
          }
        })
      }
    },
    // 微专业点击事件
    handleMicroMajoressClick (microMajoress) {
      // 判断是否登录
      if (this.loginId === null || this.loginId === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        const formData = new FormData()
        formData.append('uid', this.loginId)
        formData.append('cid', microMajoress.id)
        this.$axios.post('/Order/selectByTwoId', formData).then((res) => {
          if (microMajoress.payType === 0) {
          // 执行跳转页面
            this.$router.push({
              path: '/courseVideo',
              query: {
                roid: JSON.stringify(microMajoress)
              }
            })
          } else {
            if (res.data.data === null) {
              // 执行跳转页面
              this.$router.push({
                path: '/purchasecourses',
                query: {
                  roid: JSON.stringify(microMajoress)
                }
              })
            } else {
              // 执行跳转页面
              this.$router.push({
                path: '/courseVideo',
                query: {
                  roid: JSON.stringify(microMajoress)
                }
              })
            }
          }
        })
      }
    },
    // 系列课程点击事件
    handleSeriesCoursessClick (seriesCoursess) {
      // 执行跳转页面
      this.$router.push({
        path: '/seriescourses',
        query: {
          roid: JSON.stringify(seriesCoursess)
        }
      })
    },
    // 精选好课点击事件
    handleGoodCoursessClick (goodCoursess) {
      // 判断是否登录
      if (this.loginId === null || this.loginId === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        const formData = new FormData()
        formData.append('uid', this.loginId)
        formData.append('cid', goodCoursess.id)
        this.$axios.post('/Order/selectByTwoId', formData).then((res) => {
          if (goodCoursess.payType === 0) {
          // 执行跳转页面
            this.$router.push({
              path: '/courseVideo',
              query: {
                roid: JSON.stringify(goodCoursess)
              }
            })
          } else {
            if (res.data.data === null) {
              // 执行跳转页面
              this.$router.push({
                path: '/purchasecourses',
                query: {
                  roid: JSON.stringify(goodCoursess)
                }
              })
            } else {
              // 执行跳转页面
              this.$router.push({
                path: '/courseVideo',
                query: {
                  roid: JSON.stringify(goodCoursess)
                }
              })
            }
          }
        })
      }
    },
    // 新课推荐点击事件
    handleNewCoursessClick (newCoursess) {
      // 判断是否登录
      if (this.loginId === null || this.loginId === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        const formData = new FormData()
        formData.append('uid', this.loginId)
        formData.append('cid', newCoursess.id)
        this.$axios.post('/Order/selectByTwoId', formData).then((res) => {
          if (newCoursess.payType === 0) {
          // 执行跳转页面
            this.$router.push({
              path: '/courseVideo',
              query: {
                roid: JSON.stringify(newCoursess)
              }
            })
          } else {
            if (res.data.data === null) {
              // 执行跳转页面
              this.$router.push({
                path: '/purchasecourses',
                query: {
                  roid: JSON.stringify(newCoursess)
                }
              })
            } else {
              // 执行跳转页面
              this.$router.push({
                path: '/courseVideo',
                query: {
                  roid: JSON.stringify(newCoursess)
                }
              })
            }
          }
        })
      }
    },
    // 免费好课点击事件
    handleCourseClick (course) {
      // 判断是否登录
      if (this.loginId === null || this.loginId === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        // 执行跳转页面
        this.$router.push({
          path: '/courseVideo',
          query: {
            roid: JSON.stringify(course)
          }
        })
      }
    },
    // 微专业
    microMajor () {
      this.$axios
        .post('/microMajor/selectMicroMajor')
        .then((res) => {
          this.microMajorList = res.data.data
        })
    },
    // 导航栏标签
    dictNavigationTabs () {
      this.$axios
        .post('/dictNavigation/navigationTabs')
        .then((res) => {
          this.dictNavigationTabsList = res.data.data
          return this.dictNavigationTabsList.slice(0, 8)
        })
    },

    // 直播公开课
    livePublicClasses () {
      this.$axios
        .post('/livePublic/publicClasses')
        .then((res) => {
          this.livePublicClassesList = res.data.data
          if (this.livePublicClassesList.length !== 0) {
            this.HideOrShow = true // 数组不为空，显示
          } else {
            this.HideOrShow = false // 数组为空，不显示
          }
        })
    },
    // 精品课
    classicCourse () {
      this.$axios
        .post('/clsaaicCourse/randonClsaaicFour')
        .then((res) => {
          this.classicCourseList = res.data.data
        })
    },
    // 系列课程
    seriesCourse () {
      this.$axios
        .post('/seriesCourse/randonSeriesFour')
        .then((res) => {
          this.seriesCourseList = res.data.data
        })
    },
    // 精选好课
    goodCourse () {
      this.$axios
        .post('/goodCourse/randonGoodFour')
        .then((res) => {
          this.goodCourseList = res.data.data
        })
    },
    // 最新课程
    newCourses () {
      this.$axios
        .post('/newCourse/randonNewFour')
        .then((res) => {
          this.newCourseList = res.data.data
        })
    },
    // 免费课程查询
    freeCourses () {
      this.$axios
        .post('/freeCourses/randonFour')
        .then((res) => {
          this.freeCourseList = res.data.data
        })
    },
    showImageName (item) {
      this.currentItem = item
    },
    hideImageName () {
      this.currentItem = null
    },
    // 王勃轮播图
    getimgs () {
      this.$axios
        .get('/Carousel/getCarousels')
        .then((res) => {
          if (res.data) {
            this.tableData = res.data.data.data
          }
        })
        .catch(() => {
          //   this.myMessage('error', '失败')
          console.log('error', '加载超时')
        })
    },
    // 推荐课程查询
    recommendedCourse () {
      this.$axios
        .post('/recommendedCourse/randonThree')
        .then((res) => {
          // 假设查询到的课程列表存储在data.data字段中
          this.courseList = res.data.data
        })
    }
  }
}
</script>

<style scoped>
.div1 {
  width: 1200px;
  height: 100%;
  /* background: red; */
  margin: 0 auto;
}
/* :hover.spanzuo1 {
  color: rgb(63, 185, 103);
} */
:hover.spanzuo2 {
  color: rgb(63, 185, 103);
  cursor: pointer; /* 鼠标指针设置为手型 */
}
:hover.span333 {
  color: rgb(63, 185, 103);
  cursor: pointer; /* 鼠标指针设置为手型 */
}
.span333{
  font-size: 12px;
  /* font-weight: 600; */
  line-height: 20px;
  letter-spacing: 1px;
  cursor: pointer;
}
.spanzuo1 {
  font-size: 14px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: 1px;
  /* padding-left: 12px; */
}
.spanzuo2 {
  font-size: 14px;
  /* font-weight: 600; */
  line-height: 40px;
  letter-spacing: 1px;
  color: #777;
  cursor: pointer;
  /* padding-left: 12px; */
}
.divdddd {
  width: 100%;
  height: 3%;
  background: yellow;
}
.divddd {
  width: 90%;
  height: 8%;
  margin: 0 auto;
  margin-top: 2%;
  /* background: red; */
}
.dddd {
  width: 100%;
  height: 12px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.span111 {
  font-size: 14px;
  padding-left: 12px;
  /* font-family: PingFang SC; */
  font-weight: 600;
}
/* :hover.span111{
    鼠标点击时变色
    color: rgb(84, 33, 33);
} */
.div2dd {
  width: 5%;
  height: 100%;
  /* background: red; */
  float: left;
}
.div2-1-1 {
  width: 95%;
  height: 100%;
  /* background: green; */
  text-align: left;
  float: left;
  user-select: none;
}
.div2-1-2 {
  width: 60%;
  height: 100%;
  /* background: yellow; */
  float: left;
}
.div3-2-2 {
  width: 100%;
  height: 12%;
  /* background: yellow; */
  user-select: none;
}
.span77 {
  font-size: 12px;
  padding-left: 10px;
  line-height: 50px;
  color: #888888;
}
.span88 {
  /* padding-left: 75%; */
  float: right;
  padding-right: 7px;
  font-size: 22px;
  color: #ff1d00;
}
.span66 {
  /* padding-left: 44%; */
  font-size: 22px;
  padding: 5px;
  float: right;
  color: #ff1d00;
}
.span55 {
  padding-left: 10px;
  line-height: 35px; /* 24像素行高 */
  font-size: 12px;
  color: rgb(228, 224, 224);
}
.span44 {
  padding-left: 10px;
  line-height: 35px; /* 24像素行高 */
  font-size: 16px;
}
.span888{
  padding-left: 10px;
  line-height: 55px; /* 24像素行高 */
  font-size: 16px;
}
.span33 {
  font-size: 12px;
  padding-left: 10px;
  color: #888888;
}
.span22 {
  padding-left: 10px;
  font-size: 16px;
}
.span11 {
  padding-left: 10px;
  line-height: 35px; /* 24像素行高 */
  font-size: 14px;
}
.div111 {
  width: 100%;
  height: 100%;
  background: rgb(247, 247, 247);
}
.img7 {
  width: 100%;
  height: 100%;
}
.div9-2 {
  width: 19%;
  height: 100%;
  float: right;
  /* background: blue; */
}
.div9-1 {
  width: 80%;
  height: 100%;
  float: left;
  /* background: pink; */
}
.div10 {
  width: 100%;
  height: 110px;
  /* background: gray; */
}
.div9 {
  width: 100%;
  height: 130px;
  /* background: green; */
}
.div8 {
  width: 100%;
  height: 60px;
  /* background: green; */
}
.img6 {
  width: 100%;
  height: 53%;
}
.img5 {
  width: 100%;
  height: 48%;
}
.div7-2-1 {
  width: 24%;
  height: 100%;
  background: white;
  margin-right: 24px;
  float: left;
  border-radius: 4%; /* 设置边角半径为 50%，实现圆形效果 */
  cursor: pointer;
  user-select: none;
}
.divd {
  width: 100%;
  height: 13px;
  /* background: purple; */
}
.divdd {
  width: 100%;
  height: 20px;
  /* background: purple; */
}
.div6-2 {
  width: 100%;
  height: 77%;
  /* background: yellow; */
  display: flex;
  justify-content: flex-start;
}
.img8 {
  width: 100%;
  height: 100%;
  overflow: hidden;/*这个属性是关键*/
  transition: all 0.3s ease-in-out; /* 添加过渡效果 */
}
.img8:hover {
  transform: scale(1.1); /* 鼠标略过时放大1.2倍 */
  cursor: pointer; /* 鼠标指针设置为手型 */
}
.img4 {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out; /* 添加过渡效果 */
}
.img3 {
  width: 100%;
  height: 72%;
}
.div6-2-1 {
  width: 24%;
  height: 100%;
  float: left;
  margin-right: 24px;
  background: white;
  border-radius: 4%; /* 设置边角半径为 50%，实现圆形效果 */
}
.div5-2-1 {
  width: 24%;
  height: 100%;
  float: left;
  margin-right: 24px;
  background: white;
  border-radius: 4%; /* 设置边角半径为 50%，实现圆形效果 */
  cursor: pointer;
  user-select: none;
}
.div4-2-1 {
  width: 24%;
  height: 100%;
  background: white;
  float: left;
  margin-right: 2%;
  /* background: red; */
  border-radius: 4%; /* 设置边角半径为 50%，实现圆形效果 */
  cursor: pointer;
  user-select: none;
}
.img1 {
  width: 100%;
  height: 47%;
}
.img2 {
  width: 100%;
  height: 100%;
  border-radius: 4%; /* 设置边角半径为 50%，实现圆形效果 */
}
.div7 {
  width: 100%;
  height: 405px;
  /* background: blueviolet; */
}
.div6 {
  width: 102%;
  height: 225px;
  /* background: green; */
}
.div5 {
  width: 102%;
  height: 260px;
  /* background: blue; */
}
.div4 {
  width: 100%;
  height: 410px;
  /* background: yellow; */
}
.dd {
  width: 13px;
  height: 100%;
  float: left;
}
.div3-2-1 {
  width: 24%; /* 每个子元素占据父元素的 24% 宽度 */
  height: 100%;
  background: white;
  border-radius: 4%;
  margin-right: 2%;
  cursor: pointer;
  user-select: none;
}
.div3-2-1:hover{
  cursor: pointer;
  box-shadow: 0 0 10px rgba(133, 133, 133, 0.3);
}
.div3-2 {
  width: 100%;
  height: 86%;
  /* background: gray; */
  text-align: left; /* 设置文本左对齐 */
  display: flex;
  justify-content: flex-start;
  transition: top 0.9s ease-out;
}
.div3-222 {
  width: 100%;
  height: 86%;
  /* background: gray; */
  text-align: left; /* 设置文本左对齐 */
  display: flex;
}
.div3-2 :hover {
  cursor: pointer;
  box-shadow: 0 0 10px rgba(133, 133, 133, 0.3);
  cursor: pointer; /* 鼠标指针设置为手型 */
}
.div3-1 {
  width: 16%;
  height: 12%;
  /* background: pink; */
  user-select: none;
}
.divs{
  width: 40px;
  height: 21px;
  float: right;
  /* background: red; */
}
.p1 {
  font-size: 24px;
  color: #333;
  font-weight: bold; /* 设置字体加粗 */
  text-align: left; /* 设置文本左对齐 */
}
.div3 {
  width: 100%;
  height: 360px;
  /* background: yellow; */
  /* background-color: #333; */
}
.div2-1 {
  width: 19%;
  height: 100%;
  float: left;
  background: white;
  text-align: left;
  border-radius: 3%; /* 设置边角半径为 50%，实现圆形效果 */
}
.div2-2 {
  width: 60%;
  height: 100%;
  /* background: green; */
  float: left;
}
.div2-3 {
  width: 19%;
  height: 100%;
  float: right;
  background: white;
  text-align: left; /* 设置文本左对齐 */
  border-radius: 3%; /* 设置边角半径为 50%，实现圆形效果 */
  user-select: none;
}
.div22 {
  width: 11px;
  height: 100%;
  float: left;
}
.div1-1 {
  width: 100%;
  height: 75px;
}
.div2 {
  width: 100%;
  height: 320px;
  /* background: pink;- */
}
</style>
